<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-card style='height:600px;overflow:auto' shadow="never">
            <div>机构名称</div>
            <el-divider></el-divider>
            <!-- <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :expand-on-click-node="false">
            </el-tree> -->
            <select-tree :branch="ruleForm.BRANCHNAME" @getBranchName="getBranch" :my-show='true'></select-tree>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card style="margin-left:10px;height:600px;overflow:auto">
            <div style="margin-bottom: 10px;">
              <i class="el-icon-edit"></i><span class="title">当前：{{title}}</span>
            </div>
            <el-divider></el-divider>
            <el-form :model="ruleForm" :rules="rules" label-position="left" ref="ruleForm" label-width="20%"
              class="demo-ruleForm">
            <div v-if="flag  === 'show'">
              <el-form-item label="机构编号" prop="BRANCHNO">
                <el-input v-model="ruleForm.BRANCHNO" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="机构名称" prop="BRANCHNAME">
                <el-input v-model="ruleForm.BRANCHNAME" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="机构地址" prop="BRANCHADRESS">
                <el-input v-model="ruleForm.BRANCHADRESS" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="上级机构号" prop="FATHERBRANCHID">
                <el-input v-model="ruleForm.FATHERBRANCHID" size="medium"></el-input>
              </el-form-item>
              <el-form-item label="是否上级机构" prop="FATHERFLAG">
                <el-switch v-model="ruleForm.FATHERFLAG" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
              <el-form-item label="机构联系电话" prop="BRANCHPHONE">
                <el-input v-model="ruleForm.BRANCHPHONE" size="medium"></el-input>
              </el-form-item>
              </div>
              <el-row>
                <el-col>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="addBranch('ruleForm')" >新建机构</el-button>
                    <el-button type="primary" v-if="flag === 'show'" size="small" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button size="small" type="danger" v-if="flag === 'show'"  @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import request from "@/common/utils/requestWFM";
  import Query from '@/message/wfm/baseData/branchManage/branchQuery';
  import selectTree from "@/components/selectTree5/";
  export default {
    components: {
      selectTree
    },
    computed: {
    },
    watch: {
    },
    data() {
      // var validatorPhone = (rule, value, callback) => {
      //   let regtel = /(^[1][3,4,5,7,8][0-9]{9}$)|(^[0]\d{2}[-]\d{7,8}$)/;
      //   let regPhone = /^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/;
      //   if (regtel.test(value) || regPhone.test(value)) {
      //     callback();
      //   } else {
      //     callback(new Error("请输入11位正确的联系电话"));
      //   }
      // };
      return {
        title: '',
        flag: 'hide',
        // 机构
        defaultProps: {
          children: 'children',
          label: 'BRANCHNAME'
        },
        resData: "",
        treedata: [],
        ruleForm: {
          BRANCHNO: '',
          BRANCHNAME: '',
          BRANCHADRESS: '',
          FATHERBRANCHID: '',
          FATHERFLAG: '',
          BRANCHADRESS: '',
          BRANCHPHONE: ''
        },
        branchNO: '',
        rules: {
          FATHERBRANCHID: [{
            required: true,
            message: '请输入上级编号',
            trigger: 'blur'
          }, ],
          BRANCHNAME: [{
              required: true,
              message: '请输入机构名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          BRANCHNO: [{
            required: true,
            message: '请输入机构号',
            trigger: 'blur'
          }, ],
          BRANCHADRESS: [{
            required: true,
            message: '请输入机构地址',
            trigger: 'blur'
          }, ],
          FATHERFLAG: [{
            required: true,
            message: '是否上级机构',
            trigger: 'change'
          }],
          BRANCHPHONE: [{
            required: true,
            message: '请输入机构联系电话',
            trigger: 'blur'
          }]
        }
      }
    },
    mounted() {
      // this.queryBranch()
    },
    methods: {
      getBranch(data){
        this.flag = 'show'
        this.title = '修改机构'
        this.ruleForm=JSON.parse(JSON.stringify(data  )) 
      },
      addBranch() {
        this.flag = 'show'
        this.title = '新建机构'
        this.$refs[formName].resetFields();
        this.ruleForm.BRANCHNO = ''
        this.ruleForm.BRANCHNAME =''
        this.ruleForm.BRANCHADRESS = ''
        this.ruleForm.FATHERBRANCHID = ''
        this.ruleForm.FATHERFLAG = ''
        this.ruleForm.BRANCHPHONE = ''
      },
      // 查询机构
      // async queryBranch() {
      //   let resBody = new Query()
      //   resBody.data.BRANCHNO = this.branchNO
      //   let response = await request(resBody);
      //   if (response.SYS_HEAD.ReturnCode == "000000") {
      //     // console.log(response)
      //     this.resData = response.BODY.BRANCHDATA;
      //     this.toJson();
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //     })
      //   }
      // },
      // toJson() {
      //   let _this = this;
      //   Array.prototype.ToTreeJson = function (pid) {
      //     var result = [],
      //       temp;
      //     for (var i in this) {
      //       if (this[i].FATHERBRANCHID == pid) {
      //         // console.log("this", this[i]);
      //         result.push(this[i]);
      //         temp = _this.circlefn(this, this[i].BRANCHID);
      //         if (temp.length > 0) {
      //           this[i].children = temp;
      //         }
      //       }
      //     }
      //     return result;
      //   }
      //   this.treedata = this.resData.ToTreeJson('0');
      // },
      // circlefn(data, pid) {
      //   var result = [],
      //     temp;
      //   for (var i in data) {
      //     if (data[i].FATHERBRANCHID == pid) {
      //       result.push(data[i]);
      //       temp = this.circlefn(data, data[i].BRANCHID);
      //       if (temp.length > 0) {
      //         data[i].children = temp;
      //       }
      //     }
      //   }
      //   return result;
      // },
      // 保存
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 机构节点查询
      //  handleNodeClick(data) {
      //   console.log(data);
      //   this.flag = 'show'
      //   this.title = '修改机构'
      //   this.ruleForm=JSON.parse(JSON.stringify(data  )) 
      // }
    }
  };

</script>


<style lang="scss" scoped>
.title{
    margin-left: 6px;
    font-size: 15px;
    color: #409EFF;
  }
</style>
